<template>
	<view>
		<u-navbar :title="title" title-color="#ffffff" :background="background" back-icon-color="#ffffff" :custom-back="back">
				<view class="slot-wrap">
					<u-icon name="trash" size="40" color="#ffffff" @click="del"></u-icon>
				</view>
		</u-navbar>
		<view class="u-p-30">
			<u-form :model="form" ref="uForm" label-width="200" label-position="top">
				<u-form-item label="收货人">
					<u-input v-model="form.consigneeName" placeholder="请输入收货人姓名" />
				</u-form-item>
				<u-form-item label="手机号">
					<u-input v-model="form.consigneeMobile" placeholder="请输入收货人手机号" />
				</u-form-item>
				<u-form-item label="省市区">
					<u-input v-model="form.areaPath" type="select" placeholder="请选择收货地址区域" @click="show=true" />
					<u-picker mode="region" v-model="show" @confirm="confirm"></u-picker>
				</u-form-item>
				<u-form-item label="详细地址" label-position="top" :border-bottom="false">
					<u-input v-model="form.detailAddress" border type="textarea" height="160" :auto-height="true"
						placeholder="请输入收货详细地址" />
				</u-form-item>
				<u-form-item label="设置默认地址" label-position="top" :border-bottom="false" v-if="form.id">
					<view class="u-font-24 u-type-info">提醒：每次下单会默认推荐使用改地址</view>
					<u-switch @change="switchChange" slot="right" :active-color="$u.color.warningDark" size="45" inactive-color="#eee" v-model="form.default"></u-switch>
				</u-form-item>
			</u-form>
			<view style="position: fixed;bottom: 0;left: 0;right: 0;">
				<u-button type="warning" :ripple="true" @click="submit" style="border-radius: 0;">
					保存地址
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(to right, #FF6801, #FF9832)'
				},
				title: '',
				show: false,
				form: {
					id: '', //收货地址id， 更新的时候需要， 增加的时候不需要
					consigneeName: '', //收货人姓名
					consigneeMobile: '', //收货人手机号
					detailAddress: '', //收货详细地址
					areaPath: '', //收货地址区域
					regionCode: '', //区域id，最后一级的region code
					default:''
				}
			}
		},
		onLoad(option) {
			if (option.option) {
				this.title = "修改收货地址";
				let opt =  JSON.parse(option.option);
				this.form = opt;
			} else {
				this.title = "新建收货地址"
			}
		},
		methods: {
			back() {
				// #ifdef H5
				window.history.back()
				// #endif
				// #ifdef APP-PLUS
				uni.navigateBack()
				// #endif
			},
			confirm(e) {
				this.form.areaPath = e.province.label + '/' + e.city.label + '/' + e.area.label;
				this.form.regionCode = e.area.value;
			},
			del(){
				this.$u.api.delAddress({
					id:this.form.id
				}).then(res=>{
					if (res.code == 0) {
						this.$u.toast('删除成功');
						setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
						},1500)
					}
				})
			},
			switchChange(e){
				this.$u.api.defaultAddress({
					data_id:this.form.id
				});
			},
			submit() {
				if(this.form.id){
					this.$u.api.updateAddress(this.form).then(res => {
						if (res.code == 0) {
							this.$u.toast('修改成功');
							setTimeout(function(){
								uni.navigateBack({
									delta:1
								})
							},1500)
						}
					})
				}else{
					this.$u.api.addAddress(this.form).then(res => {
						if (res.code == 0) {
							this.$u.toast('新建成功');
							setTimeout(function(){
								uni.navigateBack({
									delta:1
								})
							},1500)
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	.slot-wrap{
		position: absolute;
		right: 10rpx;
	}
</style>
